<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app" class="demo">

    </div>

    <template id="one">
        <div>
            <!-- keep-alive 的属性 -->
            <!-- (非常重要：组件配置中要有name属性)选择需要缓存的组件，首先检查组件name属性，无name属性则匹配局部注册名称 -->
            <!--include属性 include 缓存匹配名称的组件  -->
            <keep-alive :include="['two', 'three']">
                <component :is="c3">
                    <h1>我是动态组件1</h1>
                </component>
            </keep-alive>
            <hr>

            <!-- exclude属性 exclude 不缓存匹配名称的组件 -->
            <!-- <keep-alive :exclude="['two','three']">
                <component :is="c3">
                    <h2>我是动态组件2</h2>
                </component>
            </keep-alive>
            <hr> -->

            <!-- max属性 max 属性设置最大缓存数量，0表示无限制 -->
            <!-- <keep-alive :max="2">
                <component :is="c3">
                    <h3>我是动态组件3</h3>
                </component>
            </keep-alive>
            <hr> -->

            <button @click="changecom">更换组件</button>
        </div>
    </template>

    <!-- 组件1 -->
    <template id="two">
        two数据变化 {{two_num}}
        <div style="color: red;">哈哈哈哈啊啊哈哈哈</div>
        <button @click="twoClick">2组件数</button>
    </template>

    <!-- 组件2 -->
    <template id="three">
        three 数据变化{{three_num}}
        <div style="color: blue;">
            嘿嘿嘿嘿嘿嘿噢噢噢噢
        </div>
        <button @click="threeClick">3组件数</button>
    </template>
</body>
<script>

    const twoConfig = {
        name: 'two',
        template: '#two',
        data() {
            return {
                two_num: 0
            }
        },
        //每次替换组件后，都是初始化开始，说明没有缓存数据。
        methods: {
            twoClick() {
                this.two_num++;
            }
        },
        beforeCreate() { console.log('two-beforeCreate'); },
        created() { console.log('two-created'); },
        beforeMount() { console.log('two-beforeMount'); },
        mounted() { console.log('two-mounted'); },
        beforeUpdate() { console.log('two-beforeUpdate'); },
        updated() { console.log('two-updated'); },
        beforeUnmount() { console.log('two-beforeUnmount'); },
        unmounted() { console.log('two-unmounted'); },
        activated() { console.log('two组件显示') },
        deactivated() { console.log('two组件离开') }
    }

    const threeConfig = {
        name: 'three',
        template: '#three',
        data() {
            return {
                three_num: 0
            }
        },
        //每次替换组件后，都是初始化开始，说明没有缓存数据。
        methods: {
            threeClick() {
                this.three_num++;
            }
        },
        beforeCreate() { console.log('three-beforeCreate'); },
        created() { console.log('three-created'); },
        beforeMount() { console.log('three-beforeMount'); },
        mounted() { console.log('three-mounted'); },
        beforeUpdate() { console.log('three-beforeUpdate'); },
        updated() { console.log('three-updated'); },
        beforeUnmount() { console.log('three-beforeUnmount'); },
        unmounted() { console.log('three-unmounted'); },
        activated() { console.log('three组件显示') },
        deactivated() { console.log('three组件离开') }
    }
    const HelloVueApp = {
        template: '#one',
        data() {
            return {
                'obj': {
                    'name': '张三',
                    'age': 23
                },
                'c1': 'two',
                'c2': 'two',
                'c3': 'two'
            }
        },
        components: {
            two: twoConfig,
            three: threeConfig,
        },
        methods: {
            changecom() {
                this.c3 = this.c3 == 'two' ? 'three' : 'two';
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>

</html>